
import './index.less'
import { useEffect, useState, } from 'react';
import { Col, Row, Table } from 'antd';
import type { ColumnsType, TableProps } from 'antd/es/table';
import LineEchart from '@/components/lineEchart'
import { getIndexApi, getIndexTableApi } from '@/api/login';

function Index() {
    // 当不确定后端返回对象中有多少个键值对时类型声明
    interface anyObject {
        [key: string]: any
    }
    interface tableType {
        key?: number,
        allTotal: number,
        townName: string,
        acceptTotal: number,
        mapPercentage: string,
    }
    const [tabIndex, setTabIndex] = useState<number>(1);
    const [statistics, setStatistics] = useState<anyObject>({});
    const [lineX, setLineX] = useState<string[]>([]);
    const [lineY, setLineY] = useState<anyObject[]>([]);
    const [loading, setLoading] = useState<boolean>(false);
    const columns: ColumnsType<tableType> = [
        {
            title: '排行',
            dataIndex: 'key',
            align: 'center',

        },
        {
            title: '街镇',
            dataIndex: 'townName',
            align: 'center',
        },
        {
            title: '收案总数',
            dataIndex: 'allTotal',
            defaultSortOrder: 'descend',
            sorter: (a: tableType, b: tableType) => a.allTotal - b.allTotal,
            align: 'center',
        },
        {
            title: '受理总数',
            dataIndex: 'acceptTotal',
            defaultSortOrder: 'descend',
            sorter: (a: tableType, b: tableType) => a.acceptTotal - b.acceptTotal,
            align: 'center',
        },
        {
            title: '映射比例',
            dataIndex: 'mapPercentage',
            defaultSortOrder: 'descend',
            align: 'center',
        },

    ];
    const [dataSource, setDataSource] = useState<tableType[]>([])
    const changeTab = (index: number) => {
        setTabIndex(index)
    }
    const getData = () => {
        setLoading(true)
        let params = {
            year: 2023,
            status: 0,
            caseCategory: 1
        }
        getIndexApi(params).then((response) => {
            setLoading(false)
            if (response.code == 200) {
                setStatistics(response.data.caseData)
                setLineX(response.data.caseColumnar.months)
                setLineY(response.data.caseColumnar.caseData)
            }
        })
    }
    const getTableData = () => {
        let params = {
            year: 2023,
            caseCategory: 1
        }
        getIndexTableApi(params).then((response) => {
            if (response.code == 200) {
                let newArr: tableType[] = []
                response.data.forEach((res: tableType, index: number) => {
                    newArr.push({ key: index + 1, ...res })
                })
                setDataSource(newArr)

            }
        })
    }

    useEffect(() => {
        getData();
        getTableData();
    }, [])

    return (<>
        <div id='index_container'>
            <div className='index_header'>
                <div className='header_tab'>
                    <div className={`tab_item ${tabIndex == 1 ? 'active' : ''}`} onClick={() => { changeTab(1) }}>案件统计</div>
                    <div className={`tab_item ${tabIndex == 2 ? 'active' : ''}`} onClick={() => { changeTab(2) }}>12345案件</div>
                </div>
            </div>
            <div className='index_main'>
                <Row gutter={24}>
                    <Col span={14}>
                        <div className='main_item'>
                            <div className='moudle_title'>
                                <div className='title_icon'></div>
                                <div className='title_text'>汇总统计</div>
                            </div>
                            <div className='num_statistics'>
                                <div className='num_item'>
                                    <div className='num_item_text'>收案总数</div>
                                    <div className='num_item_value'>
                                        <span className='value_num'>{statistics.allTotal ? statistics.allTotal : '0'}</span>
                                        <span className='value_unit'>件</span>
                                    </div>
                                </div>
                                <div className='num_item'>
                                    <div className='num_item_text'>调解案件</div>
                                    <div className='num_item_value'>
                                        <span className='value_num'>{statistics.arbitrateAllTotal ? statistics.arbitrateAllTotal : '0'}</span>
                                        <span className='value_unit'>件</span>
                                    </div>
                                </div>
                                <div className='num_item'>
                                    <div className='num_item_text'>仲裁案件</div>
                                    <div className='num_item_value'>
                                        <span className='value_num'>{statistics.arbitrateDisTotal ? statistics.arbitrateDisTotal : '0'}</span>
                                        <span className='value_unit'>件</span>
                                    </div>
                                </div>
                                <div className='num_item'>
                                    <div className='num_item_text'>监察案件</div>
                                    <div className='num_item_value'>
                                        <span className='value_num'>{statistics.inspectionAllTotal ? statistics.inspectionAllTotal : '0'}</span>
                                        <span className='value_unit'>件</span>
                                    </div>
                                </div>
                                <div className='num_item'>
                                    <div className='num_item_text'>区联调中心</div>
                                    <div className='num_item_value'>
                                        <span className='value_num'>{statistics.uniteDisTotal ? statistics.uniteDisTotal : '0'}</span>
                                        <span className='value_unit'>件</span>
                                    </div>
                                </div>
                                <div className='num_item'>
                                    <div className='num_item_text'>其他案件</div>
                                    <div className='num_item_value'>
                                        <span className='value_num'>{statistics.inspectionTotal ? statistics.inspectionTotal : '0'}</span>
                                        <span className='value_unit'>件</span>
                                    </div>
                                </div>
                            </div>
                            <div className='num_statisticsEcharts'>
                                <LineEchart lineX={lineX} lineY={lineY} />
                            </div>
                        </div>
                    </Col>
                    <Col span={10}><div className='main_item'>
                        <div className='moudle_title'>
                            <div className='title_icon'></div>
                            <div className='title_text'>排行榜</div>
                        </div>
                        <div className='table_bar'>
                            <Table dataSource={dataSource} columns={columns} pagination={false} size='small' />
                        </div>
                    </div></Col>
                </Row>
            </div>
        </div>
    </>);
}

export default Index;